<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <title>全民吃火鸡</title>
    <link rel="stylesheet" href="css/eatChicken.css">
    <script>
        // 屏幕自适应
        function calculateSize () {
            var clientWidth = window.innerWidth || document.documentElement.clientWidth;
            if(clientWidth >= 640){
                clientWidth = 640;
            }
            var htmlSize = clientWidth/7.5;
            document.documentElement.style.fontSize = htmlSize + 'px';
        };
        calculateSize();
        window.addEventListener('resize', calculateSize);
    </script>
</head>
<body>
    <div id="app">
        <!-- 开始页面 -->
        <div id="startPage">
            <div id="startBanner"></div>
            <div id="startBtn"></div>
        </div>

        <!-- 规则页面 -->
        <div id="rulePage" style="display:none;">
            <div id="iKnowBtn"></div>
        </div>

        <!-- 游戏页 -->
        <div id="gamePage" style="display:none;">
            <div id="timer"><span id="timeCounter">30</span><i>s</i></div>
            <div id="counter">0</div>
            <div id="gameArea">
                <div class="chicken"></div>
                <div class="tnt"></div>
                <div id="person"></div>
            </div>
        </div>

        <!-- 失败 -->
        <div id="failPage" style="display:none;">
            <div id="failBox">
                <div class="resultWords">共计<span id="failNum"></span>分<br>很遗憾差<span id="differNum"></span>分可以抽奖</div>
                <div id="failAgain" class="btn tryAgain"></div>
                <div id="failFriend" class="btn"></div>
            </div>
        </div>

        <!-- 成功 -->
        <div id="successPage" style="display:none;">
            <div id="successBox">
                <div class="resultWords">共计<span id="sucessNum"></span>分<br>奖励<span>1</span>次抽奖机会</div>
                <div id="successLottery" class="btn"></div>
                <div id="successAgain" class="btn tryAgain"></div>
                <div id="successFriend" class="btn"></div>
            </div>
            <div id="lotterySuccessBox">
                <div id="lotteryWords">恭喜你，抽中<span id="prize-name">精美礼品</span></div>
                <div id="lotterySuccessAgain" class="btn tryAgain"></div>
            </div>
            <div id="lotteryFailBox">
                <div id="lotterySuccessAgain" class="btn tryAgain"></div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="../utils/http-service.js"></script>
    <script src="js/eatChicken.js"></script>
</body>
</html>